<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
    #content{width:400px; height:200px; background:#CCC; border:1px solid black; line-height:200px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-100px; text-align:center;display:none;}
  </style>
  <script type="text/javascript">
    window.onload=function(){
      let box = document.getElementById('content');
      let time;
      document.ondragover = function(){
        clearTimeout(time);
        box.style.display = 'block';
        time = setTimeout(function(){box.style.display = 'none';},300)
      }
      box.addEventListener('dragover',function(ev){
        box.innerHTML = '松手就会上传！';
        ev.preventDefault();
      },false);
      box.addEventListener('dragleave',function(ev){
        box.innerHTML = '请把文件拖到这儿';
      },false);
      box.addEventListener('drop',function(ev){
        //在这里进行文件上传
        let form = new FormData();
        Array.from(ev.dataTransfer.files).forEach(file=>{
          form.append('f1',file);
        });
        let xhr = new XMLHttpRequest();
        xhr.open('post','http://localhost:8080/api',true);
        xhr.send(form);
        xhr.onreadystatechange = function(){
            if(xhr.readyState==4){
              if(xhr.status>=200&&xhr.status<300 || xhr.status==304){
                alert('成功了');
              }else{
                alert('失败了');
              }
            }
        }
        ev.preventDefault();
      },false);
    }
  </script>
</head>
<body>
  <div id="content">请把文件拖到这儿</div>
</body>
</html>
